<script>
import {visitPath} from "@/Interface/FileApi";
import {deleteOrder, queryOrder, updateOrder} from "@/Interface/OrderApi";
import moment from "moment";
import {dictStatus, isEmpty} from "../../Config/Tool";
import {queryDictItem} from "@/Interface/DictApi";
import {addComment} from "@/Interface/Comment";

export default {
  computed: {
    moment() {
      return moment
    }
  },
  data(){
    return {
      list:[],
      dict2:[],
      dict3:[],
      dict4:[],
      dict5:[],
      dict6:[],
      show:true,
      commentShow:false,
      updateId:0,
      commentInfo:{
        score:null,
        comment:"",
        roomId:'',
        hotelId:'',
        userId:0
      },
    }
  },
  mounted(){
    this.queryDictItemFun([2]);
    this.queryOrderFun();
  },
  methods:{
    dictStatus,
    visitPath() {
      return visitPath
    },
    /**
     * 查询我的订单
     */
    queryOrderFun(){
      queryOrder({userId:localStorage.getItem("userId")}).then(res=>{
        if(res.code===200) this.list=res.data;
        this.show=false;
      })
    },
    /**
     * 查询字典值
     */
    queryDictItemFun(e){
      e.forEach(item=>{
        queryDictItem({id:item}).then(res=>{
          switch (item){
            case 2:
              this.dict2 = res.data;
              break;
            case 3:
              this.dict3 = res.data;
              break;
            case 4:
              this.dict4 = res.data;
              break;
            case 5:
              this.dict5 = res.data;
              break;
            default:
              this.dict4 = res.data;
              break;
          }
        })
      })
    },
    /**
     * 删除订单
     */
    deleteOrderFun(item){
      deleteOrder({id:item.id}).then(res=>{
        if (res.code===200){
          this.queryOrderFun();
          this.$message.success(res.msg)
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    /**
     * 退款
     */
    outOrderFun(){
      this.$message.warning('功能暂未开放！')
    },
    /**
     * 去评价
     */
    commentFun(item){
      this.updateId=item.id;
      this.commentInfo={
        score:5,
        comment:"",
        roomId:item.roomId*1,
        hotelId:item.hotelId*1,
        userId:item.userId*1
      }
      this.commentShow=true;
    },
    /**
     * 提交评分
     */
    commentBtnFun(){
      let upId = this.updateId;
      if (isEmpty(this.commentInfo.comment)){
        this.$message.error('请填写评论信息！')
        return null;
      }else {
        let param =this.commentInfo;
        if (param.score*2===10){
          param.score=10.0
        }else {
          param.score = (param.score * 2 + Math.random() * 0.1).toFixed(1);
        }
        addComment(param).then(res=>{
          if (res.code===200){
            updateOrder({id:upId,status:"6"}).then(res=>{
              this.queryOrderFun();
              this.commentShow=false;
            })
            this.$message.success(res.msg);
          }else {
            this.$message.error(res.msg)
          }
        })
      }
    }
  }

}
</script>

<template>
<div class="body">
  <el-skeleton :rows="16" v-show="show" animated />
  <div v-if="list.length>=1" class="content">
    <div v-for="item in list" class="item">
      <!--商家信息-->
      <div class="item-hand">
        <!--商家头像-->
        <div style="height: 40px;display: flex;align-items: center">
          <img style="width: 35px;height: 35px;border-radius: 50%" :src="visitPath()+item?.hotelInfo?.avatar" />
          <span style="margin-left: 10px;font-size: 1.2rem;color: #0F294DFF;font-weight: bold">{{item?.hotelInfo?.name}}</span>
        </div>
        <!--订单状态-->
        <div>
          {{dictStatus(dict2,item.status)}}
        </div>
      </div>
      <!--房间信息-->
      <div class="item-content">
        <!--房间图片-->
        <div class="item-content-img">
          <img :src="visitPath()+item?.roomList[0][0]?.imageList[0].img" style="width: 100%;height: 100%;border-radius: 3px">
        </div>
        <div class="item-content-info">
          <!--预定几晚+房型-->
          <div>
            <span>{{item.nights}}晚</span>
            <span> , </span>
            <span>{{item.roomList[0][0].roomName}}</span>
          </div>
          <!--预定时间-->
          <div >
            <span>{{item.startDate||'-'}}</span>
            <span> - </span>
            <span>{{item.endDate||'-'}}</span>
          </div>
          <!--总价-->
          <div >
            <span>总价:</span>
            <span> ￥28:00</span>
          </div>
          <div>
            <span>下单时间:</span>
            <span> {{moment(item.createTime).format("YYYY-MM-DD hh:mm:ss")}}</span>
          </div>
        </div>
      </div>
      <!--按钮组-->
      <div class="item-btn">
        <el-button type="primary" v-if="(item.status*1)===5" @click="commentFun(item)">去评价</el-button>
        <el-button type="primary" v-if="(item.status*1)<4" @click="outOrderFun(item)">导航</el-button>
        <el-button type="success" v-if="(item.status*1)<4" @click="outOrderFun(item)">退款</el-button>
        <el-button type="danger" v-if="(item.status*1)>=4" @click="deleteOrderFun(item)">删除订单</el-button>
      </div>
    </div>
  </div>
  <el-empty v-else style="margin-top: 10%"  description="暂无订单"></el-empty>
  <el-dialog title="评论" :visible.sync="commentShow" width="240">
    <el-form :model="commentInfo">
      <el-form-item label="体验打分" >
        <el-rate
            style="margin-top: 9px"
            v-model="commentInfo.score"
            show-text>
        </el-rate>
      </el-form-item>
      <el-form-item label="评论信息" >
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="commentInfo.comment">
        </el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer" style="margin-top: -50px">
      <el-button @click="commentShow = false">取 消</el-button>
      <el-button  type="primary" @click="commentBtnFun()">评价</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>
.item-content-info{
  width: 100%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.item-content-img{
  width: 100px;
  height: 100px;
}
.item-btn{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.item-content{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.item-hand{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item{
  width: 100%;
  height: auto;
  background-color: #f8f8f8;
  min-height: 100px;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 8px;
}
.content{
  width: 100%;
  height: auto;
  padding: 10px;
  -ms-overflow-style: none;
}
.body{
  width: 100vw;
  height: auto;
  overflow-y: scroll;
  -ms-overflow-style: none;
  -ms-overflow-style: none;
}
::-webkit-scrollbar {
  display: none;
}


</style>
